//公用方法调用

yx.public.navFn()
yx.public.backPageTop()

var params = yx.parseURL(window.location.href) 
var goodId = params.id   //goodId 商品id，detailData 商品详情数据
var detailData = productList[goodId]  //当前商品数据对象 
console.log(productList)

if(!goodId || !detailData){  //商品不存在 跳转到404.html
	//window.location.href = "./404.html"
}

//渲染面包屑数据
var positionBox = yx.g("#position")
var htmlstr = '<a href="#">首页</a>> '
for(var i=0; i<detailData.categoryList.length; i++){
	htmlstr += '<a href="#">'+ detailData.categoryList[i].name +'</a>> '
}
htmlstr += detailData.name
positionBox.innerHTML = htmlstr

//产品图切换功能
;(function(){
	
	//1 左边 图片切换
	var bigImg = yx.g("#productImg .left>img")   //大图节点
	var smallImgs = yx.ga("#productImg .left .smallImg img")  //小图节点
	
	bigImg.src = smallImgs[0].src = detailData.primaryPicUrl  //渲染第一张小图和大图
	var last = smallImgs[0]  //上一张图片
	for(var i=0; i<smallImgs.length; i++){
		if(i){
			smallImgs[i].src = detailData.itemDetail['picUrl'+i]  //渲染后四张小图
		}
		smallImgs[i].index = i 
		smallImgs[i].onmouseover = function(){  //选项卡效果
			bigImg.src = this.src
			last.className = ""
			this.className = "active"
			last = this
		}
	}
	
	//右边 商品规格数据
	yx.g("#productImg .info h2").innerText = detailData.name
	yx.g("#productImg .info p").innerText = detailData.simpleDesc
	yx.g("#productImg .info .price").innerHTML = 
			'<div>'+
				'<span>售价</span>'+
				'<strong>￥'+ detailData.retailPrice +'.00	</strong>'+
			'</div>'+
			'<div>'+
				'<span>促销</span>'+
				'<a href="'+ detailData.hdrkDetailVOList[0].huodongUrlPc +'" class="tag">'+ detailData.hdrkDetailVOList[0].activityType +'</a>'+
				'<a href="#" class="dicount">'+ detailData.hdrkDetailVOList[0].name +'</a>'+
			'</div>'+
			'<div>'+
				'<span>服务</span>'+
				'<a href="" class="service">'+
					'<i></i>'+
					'30天无忧退货'+
					'<i></i>'+
					'48小时快速退款'+
					'<i></i>'+
					'满88元免邮费'+
					'<i></i>'+
					'网易自营品牌'+
				'</a>'+
			'</div>'		
		
	//创建商品规格dom
	var format_box = yx.g("#productImg .info .format")
	var dds = []  //把所有的dd标签存储起来,为了后面使用
	for(var i=0; i<detailData.skuSpecList.length; i++){
		var dl = document.createElement("dl")
		var dt = document.createElement("dt")
		dt.innerHTML = detailData.skuSpecList[i].name
		dl.appendChild(dt)
		for(var j=0; j<detailData.skuSpecList[i].skuSpecValueList.length; j++){
			var dd = document.createElement("dd")
			dd.innerHTML = detailData.skuSpecList[i].skuSpecValueList[j].value
			dd.setAttribute('data-id', detailData.skuSpecList[i].skuSpecValueList[j].id)
			dd.onclick = function(){
				changeProduct.call(this)
			}
			dl.appendChild(dd)
			dds.push(dd)
		}
		format_box.appendChild(dl)
	}
	
	//规格点击功能
	function changeProduct(){
		
		//1 获取必要的数据
		//判断当前规格是否可以点击？否 则直接退出，不执行后面的代码
		if(this.className.indexOf("noclick") !== -1){ return }
		var curId = this.getAttribute("data-id")  //当前点击规格dom上的自定义属性data-id
		var otherdd = []  //存储 要操作的 其它规格的 dd标签，为了更新它们的class
		var mergeId = []  //存储 与点击的id组合到的所有id, 为了去数据中 查询该规格组合的商品是否还有库存
		
		//获取其它规格的dd标签 和 组合后的id
		//数据对象里的key是"点击的id;对方的id”，所以只要能查到点的id的，它就包含了所有对方的id。
		for(var key in detailData.skuMap){
			if(key.indexOf(curId) !== -1){
				
				//1132095;1132097   ;1132097  1132097
				var otherId = key.replace(curId, '').replace(';', '')
				
				//通过对方的id找到对方的dd
				for(var i=0; i<dds.length; i++){
					if(dds[i].getAttribute("data-id") === otherId){
						otherdd.push(dds[i])
					}
				}
				
				//找到所有的规格组合(也就是规格id的组合)
				mergeId.push(key)
			}
		}
		
		//console.log(curId, otherdd, mergeId)
		
		//2 操作dom
		var brothers = this.parentNode.querySelectorAll('dd')   //兄弟节点
		if(this.className.indexOf('active') !== -1){  //当前规格 是选中状态
			this.className = ''
			
			for(var i=0; i<otherdd.length; i++){
				if(otherdd[i].className.indexOf('noclick') !== -1){
					otherdd[i].className = ''
				}
			}
		}else{ //当前规格 是未选中状态
			for(var i=0; i<brothers.length; i++){
				if(brothers[i].className.indexOf('active') !== -1){
					brothers[i].className = ''
				}
			}
			
			this.className += 'active'
			
			for(var i=0; i<otherdd.length; i++){
				if(otherdd[i].className.indexOf('noclick') !== -1){
					otherdd[i].className = ''
				}
				if(detailData.skuMap[mergeId[i]].sellVolume === 0){
					otherdd[i].className = 'noclick'
				}
			}
		}
		
		//3 更新加减按钮的禁用状态
		addNum()
	}
	
	addNum()
	//加减功能
	function addNum(){
		var actives = yx.ga("#productImg .info .format .active")  //用户当前选中的规格dom对象
		var btn_Box = yx.g("#productImg .info .number div")
		var btns = btn_Box.children
		var len = detailData.skuSpecList.length  //规格的数量
		
		//是否启用加减功能
		if(actives.length === len){
			btn_Box.className = ''
		}else{
			btn_Box.className = 'noClick'
		}
		
		//减号 点击功能
		btns[0].onclick = function(){
			if(btn_Box.className === 'noClick'){ return }
			btns[1].value --
			if(btns[1].value < 0){
				btns[1].value  = 0
			}
		}
		
		//输入框 点击功能
		btns[1].onfocus = function(){
			if(btn_Box.className === 'noClick'){ 
				this.blur()
			}
		}
		
		//加号 点击功能
		btns[2].onclick = function(){
			if(btn_Box.className === 'noClick'){ return }
			btns[1].value ++
		}
	}
	
	
	
})();

//大家都在看 功能
;(function(){
	//1.渲染真实数据
	var ul = yx.g("#look .carouselImgCon ul")
	var str = ''
	for(var i=0; i<recommendData.length; i++){
		str += '<li>' +
							'<a href="#"><img src="'+ recommendData[i].listPicUrl +'" ></a>' +
							'<a href="#">'+ recommendData[i].name +'</a>' +
							'<span>￥'+ recommendData[i].retailPrice +'</span>' +
						'</li>'
	}
	ul.innerHTML = str
	
	//2.轮播图功能
	var allLookCarousel = new Carousel()
	allLookCarousel.init({
		id: 'allLook',
		autoplay: true,   
		intervalTime: 2000,   
		loop: true,   
		totalNum: 8,   
		moveNum: 4,  
		moveWay: 'position' 
	}) 
})();

//详情功能
;(function(){
	var tabItems = yx.ga("#bottom .product .title a")  //详情和评价选项卡
	var tabCons = yx.ga("#bottom .product .content>div") 
	
	//1.选项卡切换效果
	var ln = 0  //上一个激活的选项卡的索引
	for(var i=0; i<tabItems.length; i++){
		tabItems[i].index = i
		tabItems[i].onclick = function(){
			tabItems[ln].className = ''  //去掉 上一个激活的选项卡 的激活样式
			tabCons[ln].style.display = 'none' //隐藏 上一个激活的选项卡 的内容
			
			this.className = 'active'   
			tabCons[this.index].style.display = 'block'  
			
			ln = this.index
		}
	}
	
	//2.渲染 详情选项卡 的真实数据
	//2.1 规格
	var detailTbody = yx.g("#bottom .product .content .details tbody")
	for(var i=0; i<detailData.attrList.length; i++){
		/* 
		 1、共有6条数据，需要创建3个tr，12个td
		 2、一个对象里包含两个数据，就需要两个td，所以每循环一次要创建两个td
		 3、一个tr里包含了四个td，所以循环两次创建一个tr
		 */
		if(i%2 === 0){
			var tr = document.createElement('tr')
		}
		var td1 = document.createElement('td')
		td1.innerHTML = detailData.attrList[i].attrName
		var td2 = document.createElement('td')
		td2.innerHTML = detailData.attrList[i].attrValue
		tr.appendChild(td1)
		tr.appendChild(td2)
		detailTbody.appendChild(tr)
	}
	//2.2 商品详情图片
	var detailImgs = yx.g("#bottom .product .content .details .img")
	detailImgs.innerHTML = detailData.itemDetail.detailHtml
})();

//评价功能
;(function(){
	//1.渲染 标题处的 评价总数量 
	var evaluateNum = commentData[goodId].data.result.length  //评价总数量
	var evaluateShowNum = evaluateNum>1000 ? '999+' : evaluateNum
	yx.g(".product .title a:nth-child(2) span ").innerHTML = evaluateShowNum
	
	//2.全部 有图 选项卡
	var allData = [[], []]  //第一个是全部评价 第二个是有图的评价
	for(var i=0; i<commentData[goodId].data.result.length; i++){
		allData[0].push(commentData[goodId].data.result[i])
		if(commentData[goodId].data.result[i].picList.length){
			allData[1].push(commentData[goodId].data.result[i])
		}
	}
	//2.1 渲染 选项卡处的 全部评论/有图评论 数量
	yx.g(".product .content .evaluate .border .eTitle div:nth-child(1) span").innerHTML = allData[0].length
	yx.g(".product .content .evaluate .border .eTitle div:nth-child(2) span").innerHTML = allData[1].length
	
	//2.2 选项卡切换效果
	var curData = allData[0]  //当前显示的评价数据（默认显示 全部评价）
	var tabsItems = yx.ga(".product .content .evaluate .border .eTitle div")
	var ln = 0
	for(var i=0; i<tabsItems.length; i++){
		tabsItems[i].index = i
		tabsItems[i].onclick = function(){  //选项卡按钮 添加 点击事件
			tabsItems[ln].className = ''
			this.className = 'active'
			ln = this.index
			
			//更新当前要显示的评论数据
			curData = allData[this.index]
			showCommend(10, 1)
			
			//更新分页器
			createPage(10, curData.length)
		}
	}
	
	//2.3 渲染 评价数据
	showCommend(10, 1)
	function showCommend(pn, cn){ //pn 一页显示几条, cn 当前是哪一页
		var ul = yx.g(".product .content .evaluate .border>ul")
		var dataStart = (cn-1)*pn   //数据开始索引
		var dataEnd = cn*pn - 1  //数据结束索引
		if(dataEnd > curData.length){  //如果结束的值大于了数据的总量，则要把结束的值改成数量总量
			dataEnd = curData.length-1
		}
		
		//生成 评论列表 html字符串
		var str = ''
		ul.innerHTML = ''  //点击不同页码时，先将当前显示的评论数据清除
		for(var i=dataStart; i<=dataEnd; i++){
			var avatar = curData[i].frontUserAvatar ? curData[i].frontUserAvatar : 'images/avatar.png'
			
			//生成 评论中 小图/大图 html字符串
			var smallImgStr = ''  //小图
			var  dialogStr= ''  //弹出层 轮播图 大图
			
			//判断评论中是否有图片
			if(curData[i].picList.length){
				var spanStr = ''  //小图 父级 是个span标签
				var liStr = ''  //大图 父级 是个li标签
				
				for(var j=dataStart; j<curData[i].picList.length; j++){
					spanStr += '<span><img src="'+ curData[i].picList[j] +'" ></span>'
					liStr += '<li><img src="'+ curData[i].picList[j] +'" ></li>'
				}
				
				smallImgStr = '<div class="smallImg clearfix">' +
												spanStr + 
											'</div>' 
				dialogStr = '<div class="dialog" id="commentImg'+ i +'" data-imgnum = "'+  curData[i].picList.length +'">' +
											'<div class="carouselImgCon">' +
												'<ul>' +
													liStr +
												'</ul>' +
											'</div>' +
											'<div class="close">X</div>' +
										'</div>'
			}

			str += '<li>' +
							'<!-- 头像、昵称 -->' +
							'<div class="avatar">' +
								'<img src="'+ avatar +'" >' + 
								'<a href="#" class="vip1"></a>' +
								'<span>'+ curData[i].frontUserName +'</span>' +
							'</div>' +
							'<!-- 一条评论 -->' +
							'<div class="text">' +
								'<p>'+ curData[i].content +'</p>' +
								 smallImgStr +
								'<div class="color clearfix">' +
									'<span class="left">'+ curData[i].skuInfo +'</span>' +
									'<span class="right">'+ yx.formatDate(curData[i].createTime) +'</span>' +
								'</div>' +
								dialogStr +
							'</div>' +
						'</li>' 
		}
		ul.innerHTML = str
		showBigImg()
	}
	
	//2.4 评价大图（轮播图形式）
	function showBigImg(){
		var spans = yx.ga("#bottom .product .smallImg span")
		for(var i=0; i<spans.length; i++){
			spans[i].onclick = function(){
				var dialog = this.parentNode.parentNode.lastElementChild  //轮播图最外层容器
				dialog.style.opacity = 1
				dialog.style.height = '510px'
				
				var en = 0
				dialog.addEventListener('transitionend', function(){ 
					en ++
					if(en === 1){
						var id = this.id
						var commentImg = new Carousel()
						commentImg.init({
							id: id,
							totalNum: dialog.getAttribute('data-imgnum'),
							autoplay: false,
							loop: false,
							moveNum: 1,
							circle: false,
							moveWay: 'position'
						})
					}
				})
				
				var closeBtn = dialog.querySelector('.close')
				closeBtn.onclick = function(){
					dialog.style.opacity = 0
					dialog.style.height = '0px'
				}
			}
		}
	}
	
	createPage(10, curData.length)
	//3 分页功能
	function createPage(pn, tn){ //pn 要显示的页码的数量， tn 数据的总条数
		var page = yx.g("#bottom .product .page")  //分页器父元素
		var totalNum = Math.ceil(tn/pn)  //一共有多少页（向上取整）
		
		//如果用户给的页码大于最大值，就改成总数
		if(pn > totalNum){
			pn = totalNum
		}
		
		page.innerHTML = ''
		
		var cn = 0 //cn 当前页码的索引
		var spans = []  //存放 数字页码 后面使用
		var div = document.createElement('div')
		div.className = 'mainPage'
		
		//创建 首页页码
		var indexPage = pageFn('首页', function(){
			for(var i=0; i<pn; i++){
				spans[i].innerHTML = i+1
			}
			cn = 0
			showCommend(10, 1) //更新评论数据
			changePage()  //更新分页器
		})
		if(indexPage){
			indexPage.style.display = 'none'
		}
		
		//创建 上一页页码
		var prevPage = pageFn('<上一页', function(){
			/* cn --
			if(cn<0){
				cn = 0
			} */
			//简写
			if(cn>0){
				cn--
			}
			showCommend(10, spans[cn].innerHTML) //更新评论数据
			changePage()  //更新分页器
		})
		if(prevPage){
			prevPage.style.display = 'none'
		}
		
		//创建数字页码
		for(var i=0; i<pn; i++){
			var span = document.createElement('span')
			span.index = i
			span.innerHTML = i+1
			spans.push(span)
			//默认第一页是激活的
			span.className = i===0 ? 'active' : ''
			span.onclick = function(){  //数字页码 点击事件
				cn = this.index  //1 更新当前页面索引
				showCommend(10, this.innerHTML) //2 更新评论数据
				changePage()  //3 更新分页器
			}
			div.appendChild(span)
		}
		page.appendChild(div)
		
		//创建 下一页页码
		var nextPage = pageFn('下一页>', function(){
			/* cn ++
			if(cn>spans.length-1){
				cn = spans.length-1
			} */
			//简写
			if(cn<spans.length-1){
				cn++
			}
			showCommend(10, spans[cn].innerHTML) //更新评论数据
			changePage()  //更新分页器
		})
		
		//创建 尾页页码
		var endPage = pageFn('尾页', function(){
			var end = totalNum
			for(var i=pn-1; i>=0; i--){
				spans[i].innerHTML = end
				end --
			}
			cn = spans.length - 1
			showCommend(10, totalNum) //更新评论数据
			changePage()  //更新分页器
		})
		
		//创建页码 （只用来创建功能性页码，不创建数字页码）
		function pageFn(inner, fn){  //inner 页码要显示的文字，fn 页码点击时的回调函数
			if(pn<2){  //如果页码数量没超过2页 就不创建功能页码
				return
			}
			
			var span = document.createElement('span')
			span.innerHTML = inner
			span.onclick = fn
			
			page.appendChild(span)  
			
			return span   //把创建的标签返回出去，在外面能用得到
		}
		
		//更新分页器 
		function changePage(){
			var cur = spans[cn]  //当前点击的数字页码dom对象
			var curInner = cur.innerHTML //保存一下当前页码，后面会修改
			//拿最后的页码数字减去第一个页码的数字算出的差，就是页码要增加或者减少的数量，
			//同时保证点击的那个页码会出现在更新后的页码里面
			var differ = spans[spans.length-1].innerHTML - spans[0].innerHTML  //差值
			
			//differ临界值修正(点击最后一个数字页码， 页码增加)
			//如果加上差值后的页码 要比 总页码 还要大，说明右边已经超过总页码了，那就需要重新设置一下差值
			if(cur.index === spans.length-1){
				if(Number(cur.innerHTML) + differ > totalNum){
					differ = totalNum - cur.innerHTML
				}
			}
			
			//differ临界值修正(点击第一个数字页码，页码减少)
			//如果减去差值的页码 比1还小，说明左边已经到头了。那就让页码从1开始
			if(cur.index === 0){
				if(cur.innerHTML-differ<1){
					differ = cur.innerHTML - 1
				}
			}
			
			for(var i=0; i<spans.length; i++){
				//2 更新 数字页码
				//2.1 如果点击了最后一个数字页码，所有页码增加 
				if(cur.index === spans.length-1){
					spans[i].innerHTML = Number(spans[i].innerHTML) + differ
				}
				
				//2.2 如果点击了第一个数字页码，所有页码减少
				if(cur.index === 0){
					spans[i].innerHTML -= differ
				}
				
				//1 更新激活样式
				spans[i].className = ''
				if(spans[i].innerHTML === curInner){
					spans[i].className = 'active'
					cn = spans[i].index
				}
			}
			
			//3 更新 功能性页码(当页码里面有功能页码才去执行下面的代码)
			if(pn>1){
				//点击第一个页码时，显示/隐藏 首页、上一页
				var dis = curInner == 1 ? 'none' : 'inline-block'
				indexPage.style.display = dis
				prevPage.style.display = dis
				
				//点击最后一个页码时，显示/隐藏 首页、上一页
				var dis = curInner == totalNum ? 'none' : 'inline-block'
				nextPage.style.display = dis
				endPage.style.display = dis
			}
		}
		
	}
	
})();


//购物车功能
;(function(){
	//1.自定义滚动条功能
	yx.public.cartFn()
	
	//2.本地存储功能
	//2.1 将 选中的商品 的信息 存储到 localStorage
	var joinBtn = yx.g("#productImg .btn .join")  //收藏按钮
	joinBtn.onclick = function(){  //加入购物车 点击事件
		var actives = yx.ga("#productImg  .format .active") //选中的规格
		var num  = yx.g("#productImg .number input").value  //购买数量
		if(actives.length < detailData.skuSpecList.length || num < 1){  
			alert("请选择商品规格或购买数量")
			return
		}
		var id = ''  //用拼接的id做为key
		var specs = []  //存放用户选中的商品规格
		for(var i=0; i<actives.length; i++){
			id += actives[i].getAttribute('data-id') + ';'
			specs.push(actives[i].innerHTML)
		}
		id = id.substring(0, id.length-1)  //去掉末尾多余的分号;
		var select = {
			"id": id,
			"name": detailData.name,
			"price": detailData.retailPrice,
			"specs": specs,
			"num": num,
			"img": detailData.skuMap[id].picUrl,
			"sign": "productLocal"  //给自己的local取一个标识，避免取到其它人的local
		}
		
		//把声明的对象存到localStorage里面
		localStorage.setItem(id, JSON.stringify(select))
		
		//2.2 更新 购物车版块
		yx.public.cartFn()
	}
	
})();



